<template>
	<view class="u-demo">
		<view class="u-demo-wrap">
			<view class="u-demo-area">
				<u-upload @on-choose-fail="onChooseFail" :before-remove="beforeRemove" ref="uUpload" :custom-btn="false" :show-upload-list="true" 
				:action="action" :auto-upload="false"
				:show-progress="true" :deletable="true" :max-count="1" @on-list-change="onListChange">
				</u-upload>
				<u-button :custom-style="{marginTop: '20rpx'}" @click="upload">上传</u-button>
				<u-button :custom-style="{marginTop: '40rpx'}" @click="clear">清空列表</u-button>
				<!-- <u-button :custom-style="{marginTop: '40rpx'}" @click="reUpload">重新上传</u-button> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: 'http://127.0.0.1:7001/upload',
				// 预置上传列表
				lists: [], // 组件内部的文件列表
				// lists: [{
				// 	url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
				// 	error: false,
				// 	progress: 100
				// }],
			}
		},
		onLoad() {
			
		},
		methods: {
			// reUpload() {
			// 	this.$refs.uUpload.reUpload();
			// },
			// 清空当前上传列表
			clear() {
				this.$refs.uUpload.clear();
			},
			
			
			//上传
			upload() {
				this.$refs.uUpload.upload();
				console.log("upload")
			},
			//删除一个上传图片
			deleteItem(index) {
				this.$refs.uUpload.remove(index);
				console.log("deleteItem")
			},
			
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
				console.log("进入集合")
				console.log(this.lists)
			},
			beforeRemove(index, lists) {
				console.log("beforeRemove")
				return true;
			},
			onChooseFail(e) {
				console.log("onChooseFail")
				// console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	.u-demo-wrap {
		background-color: #FFFFFF;
		padding: 40rpx 8rpx;
		margin-left: -14rpx;
		margin-right: -14rpx;
	}
	
	.u-add-wrap {
		flex-direction: column;
		color: $u-content-color;
		font-size: 28rpx;
	}
	
	/deep/ .slot-btn {
		width: 329rpx;
		height: 140rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgb(244, 245, 246);
		border-radius: 10rpx;
	}

	.slot-btn__hover {
		background-color: rgb(235, 236, 238);
	}

	.pre-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pre-item {
		flex: 0 0 48.5%;
		border-radius: 10rpx;
		height: 140rpx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20rpx;
	}

	.u-progress {
		position: absolute;
		bottom: 10rpx;
		left: 8rpx;
		right: 8rpx;
		z-index: 9;
		width: auto;
	}

	.pre-item-image {
		width: 100%;
		height: 140rpx;
	}

	.u-delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		background-color: $u-type-error;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
